<template>
    <view @submit="submit" class="address_info">
        <view class="flex-start address_item">
            <text>联系人</text>
            <input class="form_content" v-model="userInfo.name" type="text" placeholder="请填写联系人" />
            <button class="import_btn flex-start" @tap="importAddress">
                <image src="/static/wechat.png" /> <text>微信导入</text>
            </button>
        </view>
        <view class="flex-start address_item">
            <text>性别</text>
            <radio-group @change="changeGender" class="form_content flex-start  gender_radio_group">
                <label class="flex-start" v-for="(item, index) in genders" :key="index">
                    <radio :checked="index === 0" :value="index" />
                    <text>{{ item }}</text>
                </label>
            </radio-group>
        </view>
        <view class="flex-start address_item">
            <text>手机号</text>
            <input class="form_content" v-model="userInfo.phone" type="number" placeholder="请填写手机号" />
        </view>
        <view class="flex-start address_item">
            <text>地址</text>
            <view class="form_content" @tap="getAddress">
                <text class="has_input" v-if="userInfo.address">{{ userInfo.address }}</text>
                <text v-else class="no_input">请选择收货地址</text>
            </view>
            <image class="right_icon" src="/static/jiantou-right.png" />
        </view>
        <view class="flex-start address_item">
            <text>门牌号</text>
            <input class="form_content" v-model="userInfo.detail" type="text" placeholder="例：B座 6楼 602室" />
        </view>
        <view class="flex-start address_item">
            <text>标签</text>
            <view class="form_content flex-start">
                <text @tap="userInfo.label = item" :class="['label', { checked: userInfo.label === item }]"
                    v-for="(item, index) in label" :key="index">{{ item }}</text>
            </view>
        </view>
        <button class="submit_btn" @tap="submit">提交</button>
    </view>
</template>
<script setup lang="ts">
import request from '@/api/request';
import type { AddressInfo } from '@/types';
import { ref } from 'vue';
const userInfo = ref<AddressInfo>({ gender: 0 });
const label = ["家", "公司", "学校"];
const genders = ["男", "女"];
const submit = async (e: any) => {
    uni.showLoading();

    await request("/createAddress", userInfo.value, "POST");
    uni.showToast({ title: "添加成功" });
    uni.hideLoading();
    uni.navigateBack();
};
const getAddress = () => {
    uni.chooseLocation({
        success: res => {
            userInfo.value.address = res.address;
        }, fail: err => {
            uni.showToast({ title: "获取位置失败" });
            console.log(err);
        }
    });
};
const changeGender = (e: { detail: { value: number; }; }) => {
    userInfo.value.gender = e.detail.value;
};
const importAddress = () => {
    uni.chooseAddress({
        success: res => {
            const { cityName, countyName, detailInfo, provinceName, telNumber, userName } = res;
            userInfo.value.name = userName;
            userInfo.value.address = provinceName + cityName + countyName;
            userInfo.value.detail = detailInfo;
            userInfo.value.phone = telNumber;
            console.log(res);

        }, fail: err => {
            console.log(err);

        }
    });
};
</script>
<style lang="scss">
.address_info {
    padding: 0 30rpx;
    display: block;
    font-size: 14px;
    box-sizing: border-box;

    .address_item {
        box-sizing: border-box;
        width: 100%;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #eee;

        .form_content {
            flex: 1;
        }

        .import_btn {
            font-size: 14px;
            background: #fff;
            padding: 6rpx 10rpx;

            image {
                width: 30rpx;
                height: 30rpx;
                margin-right: 16rpx;
            }
        }

        .gender_radio_group {
            label {
                margin-right: 30rpx;
            }
        }

        .right_icon {
            width: 30rpx;
            height: 30rpx;
        }

        .label {
            margin-right: 20rpx;
            border: 1px solid #eee;
            padding: 2rpx 16rpx;
            color: #666;
            font-size: 24rpx;
            width: auto !important;
        }

        .checked {
            background: #214bd5;
            color: #fff;
        }

        text {
            &:first-child {
                width: 140rpx;
            }
        }

        .no_input {
            color: #808080;
            width: 100% !important;
        }

        .has_input {
            width: 100% !important;
        }

    }

    .submit_btn {
        background: #214bd5;
        color: #fff;
        padding: 20rpx;
        margin-top: 30rpx;
    }
}
</style>